<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom3" style="height: 150px;margin-top: 30px;"></div>
    </div>
</template>

<script>
import { Scatter } from '@antv/g2plot';

export default {
    data() {
        return {
            title: '监测点经纬度信息'
        }
    },
    methods: {
        loadScatter() {
            const data = [
                { x: '一号设备', y: 2 },
                { x: '二号设备', y: 4 },
                { x: '三号设备', y: 3 },
                { x: '四号设备', y: 5 },
                { x: '五号设备', y: 1 },

            ];
            // 定义需要固定显示的标签内容
            const customLabels = {
                '一号设备': '经度:103.698965\n纬度:36.090771',
                '二号设备': '经度:103.699249\n纬度:36.091265',
                '三号设备': '经度:103.700226\n纬度:36.090181',
                '四号设备': '经度:103.777137\n纬度:36.054036 ',
                '五号设备': '经度:103.774326\n纬度:36.053619'
            };
            const scatterPlot = new Scatter(this.$refs.bottom3, {
                data,
                xField: 'x',
                yField: 'y',
                size: 5,
                pointStyle: {
                    stroke: '#777777',
                    lineWidth: 1,
                    fill: 'yellowgreen',
                },
                // 点的标签配置：显示自定义固定内容
                label: {
                    visible: true, // 显示标签
                    position: 'bottom', // 标签位置在点的上方
                    style: {
                        fontSize: 10,
                        fill: 'white',
                    },
                    // 格式化标签内容：根据原始x值映射到自定义文本
                    formatter: (datum) => customLabels[datum.x] || datum.x
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: null,
                            color: "white",
                            fontSize: 5
                        }
                    }
                },
                // x轴标签配置：将原始x值替换为自定义固定内容
                xAxis: {
                    label: {
                        // 直接显示原始值
                        formatter: (value) => value
                    }
                },
                // 配置X轴字段的对象
                xAxis: {
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 13
                        }
                    }
                },
                // 配置Y轴字段对象
                yAxis: {
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 16
                        }
                    }
                },
                regressionLine: {
                    type: 'quad', // linear, exp, loess, log, poly, pow, quad
                },
            });
            scatterPlot.render();
        }
    },
    mounted() {
        this.loadScatter();
    }
}
</script>

<style lang="less" scoped></style>